<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        专业选择
      </div>
      <div>
        <el-cascader
          v-model="majorId"
          :options="majorDropDownByCollegeData"
          :show-all-levels="true"
          :props="{emitPath:false}"
          @change="onMajorChange"
        />
      </div>
    </el-card>
    <div v-if="hasPlanData">
      <el-card style="margin-top: 20px;">
        <div slot="header">
          培养计划基本信息
          <el-button v-if="!planBasicEditMode" type="warning" plain @click="openPlanBasicEditMode">编辑</el-button>
          <span v-else>
            <el-button plain @click="cancelEditPlanBasic">取消</el-button>
            <el-button type="primary" plain @click="confirmEditPlanBasic">修改</el-button>
          </span>
        </div>
        <!-- 基础信息详情 -->
        <el-form :disabled="!planBasicEditMode">
          <el-form-item label="培养计划名称">
            <el-input v-model="majorPlan.planName" type="text" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model="majorPlan.remark"
              type="textarea"
              :auto-size="{minRow: 2, maxRow: 4}"
              :maxlength="255"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </el-card>
      <el-row style="margin-top: 20px;" :gutter="20">
        <!-- 必修课列表 -->
        <el-col :span="15">
          <el-card style="height: 500px;">
            <div slot="header">
              必修课程信息
              <el-button type="success" plain @click="showRcAdd">添加必修课程</el-button>
              <el-button v-if="rcDelBtnShow" type="danger" plain @click="doRcDel">批量删除</el-button>
            </div>
            <div>
              <el-table :data="majorPlan.requireCourseList" border height="450" @selection-change="rcSelectChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="courseName" label="课程名称" />
                <el-table-column prop="yearOrderNum" label="修读学年次第" />
                <el-table-column prop="termOrderNum" label="修读学期" />
              </el-table>
            </div>
          </el-card>
        </el-col>
        <!-- 选修课列表 -->
        <el-col :span="9">
          <el-card style="height: 500px;">
            <div slot="header">
              选修课程信息
              <el-button type="success" plain @click="showOcAdd">添加选修课程</el-button>
              <el-button v-if="ocDelBtnShow" type="danger" plain @click="doOcDel">批量删除</el-button>
            </div>
            <div>
              <el-table :data="majorPlan.optionalCourseList" border height="450" @selection-change="ocSelectChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="courseName" label="课程名称" />
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-card v-else style="margin-top: 20px;text-align: center;">
      <div v-if="majorId!=null">
        暂无培养计划,
        <el-link :underline="false" style="font-size: medium;" @click="createMajorPlan">点击添加</el-link>
      </div>
      <div v-else>
        请先选择专业
      </div>
    </el-card>

    <el-dialog width="30%" :visible.sync="rcAddShow" title="添加必修课程" :before-close="closeRcAdd" center>
      <el-form>
        <el-form-item label="选择必修课程">
          <el-select v-model="rcFormData.courseId">
            <el-option
              v-for=" rc in requireCourseDropdownData"
              :key="rc.value"
              :label="rc.label"
              :value="rc.value"
              :disabled="rc.disable"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择修读学年次第">
          <el-select v-model="rcFormData.yearOrderNum">
            <el-option v-for=" idx of majorStudyYearNum " :key="idx" :label="`第${idx}学年`" :value="idx" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择修读学期">
          <el-select v-model="rcFormData.termOrderNum">
            <el-option label="第一学期" :value="1" />
            <el-option label="第二学期" :value="2" />
            <el-option label="第三学期" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="closeRcAdd">取消</el-button>
          <el-button type="primary" @click="doRcAdd">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog width="30%" :visible.sync="ocAddShow" title="添加选修课程" :before-close="closeOcAdd" center>
      <el-form>
        <el-form-item label="选择选修课程">
          <el-select v-model="ocFormData.courseId">
            <el-option
              v-for=" oc in optionalCourseDropdownData"
              :key="oc.value"
              :label="oc.label"
              :value="oc.value"
              :disabled="oc.disable"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="closeOcAdd">取消</el-button>
          <el-button type="primary" @click="doOcAdd">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>

import { getMajorDropDownGroupByCollege, getCourseDropdownListByCourseProperty } from '@/api/ms/dropdown'

import { getMajorPlanDetail, createMajorPlan, updateMajorPlanBasic, addRequireCourse,
  addOptionalCourse, deleteRequireCourse, deleteOptionalCourse } from '@/api/ms/course/teach/majorPlan'
import { getById as getMajorById } from '@/api/ms/organization/org/major'

const getDefaultMajorPlan = () => {
  return {
    id: null,
    planName: '',
    remark: '',
    requireCourseList: [],
    optionalCourseList: []
  }
}

export default {
  name: 'MajorPlan',
  data() {
    return {
      majorDropDownByCollegeData: [],
      majorId: null, // 当前培养计划对应的专业id
      hasPlanData: false, // 培养计划数据标识
      planBasicEditMode: false, // 是否处于培养计划基础信息编辑模式
      planBasicBackData: {}, // 打开培养计划基本信息编辑模式后，缓存修改前的数据
      majorPlan: { // 培养计划相关数据
        id: 1,
        planName: '软件工程专业2019培养计划',
        majorId: 1,
        majorName: '化学工程与工艺',
        remark: '软件工程2019专业的培养计划',
        requireCourseList: [
          {
            id: 1,
            planId: 1,
            courseId: 1,
            courseName: '软件工程',
            yearOrderNum: 1,
            termOrderNum: 1
          },
          {
            id: 3,
            planId: 1,
            courseId: 3,
            courseName: '流体力学',
            yearOrderNum: 1,
            termOrderNum: 1
          },
          {
            id: 2,
            planId: 1,
            courseId: 7,
            courseName: '有机化学',
            yearOrderNum: 1,
            termOrderNum: 1
          }
        ],
        optionalCourseList: [
          {
            id: 1,
            planId: 1,
            courseId: 4,
            courseName: 'Java课程设计'
          }
        ]
      },
      majorPlanBaseFormData: {
        id: null,
        planName: '',
        remark: ''
      },
      rcAddShow: false, // 必修课添加对话框显示,
      ocAddShow: false, // 选修课添加对话框显示
      requireCourseDropdownData: [], // 必修课程下拉数据
      optionalCourseDropdownData: [], // 选修课程下拉数据
      majorStudyYearNum: null, // 专业修读年数
      rcFormData: {},
      ocFormData: {},
      rcDelBtnShow: false,
      ocDelBtnShow: false,
      rcSelectedIds: [],
      ocSelectedIds: []
    }
  },
  computed: {
    majorPlanBaicData() {
      const data = {
        id: this.majorPlan.id,
        planName: this.majorPlan.planName,
        remark: this.majorPlan.remark
      }
      return data
    }
  },
  mounted() {
    // 获取下拉数据
    this.getDropDownData()
  },
  methods: {
    getDropDownData() {
      getMajorDropDownGroupByCollege().then(({ data }) => {
        this.majorDropDownByCollegeData = data
      }).catch(() => {})
    },
    onMajorChange() {
      this.refreshData()
    },
    refreshData() {
      const reqData = {
        majorId: this.majorId
      }
      getMajorPlanDetail(reqData).then(({ data }) => {
        if (data) {
          this.majorPlan = data
          this.hasPlanData = true
          // 获取专业修读年数
          getMajorById(this.majorId).then(({ data }) => {
            this.majorStudyYearNum = data.studyYearNum
          }).catch(() => {})
        } else {
          this.majorPlan = getDefaultMajorPlan()
          this.hasPlanData = false
        }
      }).catch(() => {})
    },
    createMajorPlan() { // 专业没有培养计划时。创建一个新的培养计划模板
      createMajorPlan(this.majorId).then(({ message }) => {
        this.$message.success(message)
        // 刷新数据
        this.refreshData()
      }).catch(() => {})
    },
    openPlanBasicEditMode() {
      this.planBasicBackData = {
        planName: this.majorPlan.planName,
        remark: this.majorPlan.remark
      }
      this.planBasicEditMode = true
    },
    cancelEditPlanBasic() {
      this.majorPlan.planName = this.planBasicBackData.planName
      this.majorPlan.remark = this.planBasicBackData.remark
      this.planBasicEditMode = false
    },
    confirmEditPlanBasic() {
      const reqData = this.majorPlanBaicData
      updateMajorPlanBasic(reqData).then(({ message }) => {
        this.$message.success(message)
        this.planBasicEditMode = false
        this.planBasicBackData = {}
      }).catch(() => {})
    },
    showRcAdd() {
      this.rcAddShow = true
      getCourseDropdownListByCourseProperty(0).then(({ data }) => {
        // 将培养计划必修课列表中已有的禁用
        data.forEach(op => {
          const cid = op.value
          if (this.majorPlan.requireCourseList.find(c => c.courseId === cid)) {
            op.disable = true
          }
        })
        this.requireCourseDropdownData = data
      })
    },
    closeRcAdd() {
      this.rcAddShow = false
      this.rcFormData = {}
    },
    doRcAdd() {
      const reqData = this.rcFormData
      reqData.planId = this.majorPlan.id
      addRequireCourse(reqData).then(({ message }) => {
        this.$message.success(message)
        this.closeRcAdd()
        this.refreshData()
      }).catch(() => {})
    },
    showOcAdd() {
      this.ocAddShow = true
      getCourseDropdownListByCourseProperty(1).then(({ data }) => {
        // 将培养计划选修课列表中已有的禁用
        data.forEach(op => {
          const cid = op.value
          if (this.majorPlan.optionalCourseList.find(c => c.courseId === cid)) {
            op.disable = true
          }
        })
        this.optionalCourseDropdownData = data
      })
    },
    closeOcAdd() {
      this.ocAddShow = false
      this.ocFormData = {}
    },
    doOcAdd() {
      const reqData = this.ocFormData
      reqData.planId = this.majorPlan.id
      addOptionalCourse(reqData).then(({ message }) => {
        this.$message.success(message)
        this.closeOcAdd()
        this.refreshData()
      }).catch(() => {})
    },
    rcSelectChange(rows) {
      this.rcSelectedIds = rows.map(i => i.id)
      this.rcDelBtnShow = rows.length > 0
    },
    ocSelectChange(rows) {
      this.ocSelectedIds = rows.map(o => o.id)
      this.ocDelBtnShow = rows.length > 0
    },
    doRcDel() {
      this.$confirm('确认删除选中的必修课程？', '删除确认').then(() => {
        deleteRequireCourse(this.rcSelectedIds).then(({ message }) => {
          this.$message.success(message)
          this.refreshData()
        }).catch(() => {})
      }).catch(() => {})
    },
    doOcDel() {
      this.$confirm('确认删除选中的选修课程？', '删除确认').then(() => {
        deleteOptionalCourse(this.ocSelectedIds).then(({ message }) => {
          this.$message.success(message)
          this.refreshData()
        }).catch(() => {})
      }).catch(() => {})
    }
  }
}
</script>

<style>

</style>
